<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    router
  >
    <div class="navbar">“微商城”后台管理系统</div>
    <!-- 头像 -->
    <el-sub-menu
      index="1"
      class="menu"
    >
      <template #title> 图片 </template>
      <el-menu-item index="/index/person">个人中心</el-menu-item>
      <el-menu-item @click="onLogout">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
  import { ElMessageBox, ElNotification } from 'element-plus';
  import { useUserStore } from '@/store/user';
  import { useRouter } from 'vue-router';
  const router = useRouter()

  const userStore = useUserStore()

  // 退出登录
  const onLogout = async () => {
    try {
      await ElMessageBox.confirm('确认退出么', '退出登录', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
      // 将内容置为空
      userStore.userLogout()
      // // 提示信息
      ElNotification({
        title: '成功',
        message: '成功登出',
        type: 'success',
      })
      // 跳转
      console.log('router.push');
      // 为什么不会跳转呢？
      // 因为如果参数一样 起始位置和最终位置一样 那么就不会执行 push 也就不会执行路由守卫
      // 恰好本项目跳转到 login 是通过路由守卫来执行的 所以它就不会跳转
      router.push({
        path: '/', query: {
          reload: Date.now() // 可以使参数唯一 这样就可以触发路由守卫实现跳转了
        }
      })
      // router.push('/')
    } catch (e) {
      console.log(e)
    }
  }
</script>

<style scoped>
  .el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
  }

  .el-menu-demo {
    background: linear-gradient(90deg, #1493fa, #01c6fa);
  }

  .navbar {
    color: white;
    font-size: 20px;
  }

  .menu {
    margin-left: auto;
  }
</style>
